<template>
  <section class="login-box">
    <el-row class="login-mid">
      <el-form :model="loginForm" ref="loginForm" class="demo-ruleForm login-container">
        <h3 class="title">客户管理系统</h3>
        <div class="userlogin">
          <div>
            <div class="userInformation">
              <el-input type="text" v-model.trim="loginForm.username" autofocus autocomplete="off" placeholder="请输入登录手机号" @keyup.enter.native="loginSubmit"></el-input>
            </div>
            <div class="userInformation">
              <el-input type="password" v-model.trim="loginForm.password" autofocus autocomplete="off" placeholder="请输入密码" @keyup.enter.native="loginSubmit"></el-input>
            </div>
          </div>
          <div class="userhasLoad">
            <el-button type="primary" class="userbtn"  @click="loginSubmit" v-resetClick :loading="hasLoad">登&nbsp;录</el-button>
          </div>
        </div>
      </el-form>
    </el-row>
  </section>
</template>

<script>
import { userlogin } from 'api/txEquipment/index'
export default {
  data () {
    return {
      loginForm: {
        username: '', // 用户名
        password: '' // 密码
      },
      hasLoad: false
    }
  },
  methods: {
    loginSubmit () { // 登录
      if (!this.loginForm.username) return this.$message({message: '请输入账号', type: 'warning'})
      if (!this.loginForm.password) return this.$message({message: '请输入密码', type: 'warning'})
      this.hasLoad = true
      let postData = {'user_name': this.loginForm.username, 'password': this.loginForm.password}
      userlogin(postData).then(res => {
        window.localStorage.accessToken = res.data.accessToken
        this.hasLoad = false
        let shopId = window.location.pathname.split('/')[1]
        window.location.href = `/${shopId}/`
      }).catch(res => {
        this.hasLoad = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  width: 100%;
  height: 100%;
  position: relative;
  .title {
    margin: 50px auto 20px auto;
    text-align: center;
    color: #2f80f1;
    font-size: 26px;
  }
  .userInformation{
    /deep/ .el-input-group__append{
      background-color:#ffffff;
      border: none;
      color: #2f80f1;
      cursor: pointer;
    }
  }
  .login-mid {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url(../../assets/img/tx/99.png) no-repeat fixed top/cover;
    background-size:cover;
  }
  .login-container {
    width: 440px;
    height: 400px; // 500px;
    box-sizing: border-box;
    padding: 0 50px;
    background: #ffffff;
    margin: 0 auto;
    border-radius: 5px;
    .userlogin{
      .userInformation{
        height: 69px;
        margin: 0;
        display: flex;
        padding-bottom: 4px;
        flex-direction: column;
        justify-content: flex-end;
        border-bottom: 1px solid #DCDFE6;
        .el-input{
          /deep/ .el-input__inner{
            font-size: 16px;
            border: none!important;
            padding: 0;
          }
          /deep/ input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
          }
        }
      }
    }
    .login-pro{
      margin: 16px 0 20px 0;
      width: 100%;
      text-align: right;
      font-size: 14px;
      line-height: 14px;
      padding: 0;
      cursor: pointer;
      color: #A0ABC2;
      user-select:none;
    }
    .userhasLoad{
      width: 100%;
      .userbtn{
        height: 56px;
        width: 340px;
        margin: 40px auto 0;
        font-size: 18px;
        color: #ffffff;
        background: #2f80f1;
      }
    }
  }
}
</style>
